<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>回收地图</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/common-m.css" />
    <link rel="stylesheet" href="../common/css/vant.css" />
    <link rel="stylesheet" href="./css/index-vw.css" />
    <!-- <link rel="stylesheet" href="./css/index.css" /> -->
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="fixed-top">
        <!-- 头部 -->
        <header class="header flex between">
          <img
            src="./images/icon-back.png"
            class="icon-back"
            @click="handleBack"
          />
          <div class="search-box flex align-start">
            <input type="text" hidden />
            <input
              id="inputSearch"
              type="text"
              v-model="keyword"
              placeholder="请输入回收关键词"
              @keyup="onSearch"
            />
            <van-icon
              name="cross"
              v-show="showType === 'search'"
              @click="handleClear"
            />
          </div>
        </header>
      </div>
      <section class="map">
        <!-- 地图  -->
        <div class="map-box" id="mapContainer"></div>
      </section>
      <div class="mask" v-if="showType === 'search'"></div>
      <div class="fixed-bottom flex column align-end">
        <img src="./images/enter.png" class="img-join" v-if="showButton" />
        <div class="click-join" @click="onApply" v-if="showButton"></div>
        <section class="section-list flex column">
          <div class="icon-drag"></div>
          <div class="scroll-box" :class="showType">
            <div class="search-list list">
              <div
                v-for="item in detailList"
                :key="item.uid"
                class="item"
                @click="onCompanyClick(item)"
              >
                <div class="item-content">
                  <div class="text-name ellipsis">{{item.comname}}</div>
                  <div class="text-vip flex">
                    <img :src="item.rankimg" class="img-vip" />
                    <p>第<span class="text-green">{{item.vipyear}}</span>年</p>
                  </div>
                  <div class="flex between">
                    <div class="icon-list flex">
                      <div
                        class="icon-item flex"
                        :class="{active: parseInt(item.issm) === 1}"
                      >
                        <img
                          :src="`./images/icon-smrz-${item.issm}.png`"
                          class="icon"
                        />
                        <span class="text">实名认证</span>
                      </div>
                      <div
                        class="icon-item flex"
                        :class="{active: parseInt(item.iszz) === 1}"
                      >
                        <img
                          :src="`./images/icon-sdrz-${item.iszz}.png`"
                          class="icon"
                        />
                        <span class="text">企业认证</span>
                      </div>
                    </div>
                    <div class="distance flex">
                      <img src="./images/icon-pos.png" class="icon-pos" />
                      <p class="text-distance">距您{{item.distance}}公里</p>
                    </div>
                  </div>
                  <div class="line"></div>
                  <div class="text-desc ellipsis">
                    所属行业: {{item.hangye || '信息待完善'}}
                  </div>
                  <div class="text-desc ellipsis">
                    公司主营: {{item.commain || '信息待完善'}}
                  </div>
                  <div class="button primary" @click="handleInquiry(item)">
                    在线询盘
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="showType === 'search' && detailList.length === 0"
              class="empty"
            >
              暂无数据
            </div>
          </div>
        </section>
      </div>

      <!-- 申请入住 -->
      <van-dialog
        v-model="showDialog"
        :show-confirm-button="false"
        width="74.5333vw"
      >
        <img src="./images/popup-1.png" class="img-popup" />
        <form class="form join">
          <div class="form-item">
            <input
              type="text"
              placeholder="请输入联系人姓名"
              v-model="form.name"
              maxlength="20"
            />
          </div>
          <div class="form-item">
            <input
              type="text"
              placeholder="请输入联系电话"
              v-model="form.phone"
            />
          </div>
          <div class="form-item">
            <div class="button primary" @click="onSubmit">确认</div>
            <div class="button text" @click="showDialog=false">暂不入驻</div>
          </div>
        </form>
      </van-dialog>

      <!-- 留言 -->
      <van-popup
        v-model="showDialogMessage"
        closeable
        close-icon="close"
        position="bottom"
        round
        :style="{ height: '30%' }"
      >
        <p class="popup-title">留言询盘</p>
        <form class="form message">
          <div class="form-item input">
            <label for="name">联系人</label>
            <input
              type="text"
              placeholder="请输入联系人姓名"
              v-model="formMessage.name"
            />
          </div>
          <div class="form-item input">
            <label for="phone">联系电话</label>
            <input
              type="text"
              placeholder="请输入联系电话"
              v-model="formMessage.phone"
            />
          </div>
          <div class="form-item textarea">
            <label for="desc">补充内容</label>
            <textarea
              id="desc"
              placeholder="填写想要了解的物资信息，如产品规格、价格、数量等"
              v-model="formMessage.desc"
              maxlength="200"
            ></textarea>
            <div class="text-count">{{formMessage.desc.length}}/200</div>
          </div>
          <div class="form-item">
            <div class="button primary" @click="onSubmitMessage">提交留言</div>
          </div>
        </form>
      </van-popup>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/vant.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "e60866365699a74bcf4b0e5e6839a2aa",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=ec63629efb4cdb5b157b9f9b1ab79c07"
    ></script>
    <script src="./js/vconsole.js"></script>
    <script>
      new VConsole();
    </script>
    <script src="./js/index.js"></script>
  </body>
</html>
